<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0/no">
    <meta content="telephone=no,email=no" name="format-detection"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>智能社--http://www.zhinengshe.com</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #div1{
            width: 100px;
            height: 100px;
            background: red;
            margin: 100px auto;
        }
    </style>
    <script src="hammer.min.js"></script>
    <script>
        window.onload=function(){
            var oDiv=document.getElementById('div1');
            var oldD=0;
            var hammer = new Hammer(oDiv);
            hammer.get('pinch').set({ enable: true });
            hammer.on('pinchstart', function(ev) {
                oldD=ev.scale;
                ev.preventDefault();
            });
            hammer.on('pinchmove',function(ev){
                var disD=ev.scale-oldD;
                oDiv.style.WebkitTransform='scale('+disD+')';
            });

        };
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>
